<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件处理模型</title>
		<style type="text/css">
			.wrapper{
				width: 300px;
				height: 300px;
				background-color: red;
			}
			.content{
				width: 200px;
				height: 200px;
				margin-left: 300px;
				background-color: green;
			}
			.box{
				width: 100px;
				height: 100px;
				margin-left: 200px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<!--<div class="wrapper">
			<div class="content">
				<div class="box"></div>
			</div>
		</div>-->
		
		<!--<a href="https://www.baidu.com">www.baidu.com</a>-->
		
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<!--<a href="#">www.baidu.com</a>-->
		
		<!--<a href="javascript:void(false)">www.baidu.com</a>-->
		
		
		<script>
			var wrapper = document.getElementsByClassName('wrapper')[0];
			var content = document.getElementsByClassName('content')[0];
			var box = document.getElementsByClassName('box')[0];
			/**
			 * 冒泡
			 * 非视觉上
			 * 内-->外
			 */
			/*wrapper.addEventListener('click',function(){
				console.log('wrapper');
			},false);
			
			content.addEventListener('click',function(){
				console.log('content');
			},false);
			
			box.addEventListener('click',function(){
				console.log('box');
			},false);*/
			
			/*
			 * 捕获
			 * 外-->内
			 * IE没有
			 */
			/*wrapper.addEventListener('click',function(){
				console.log('wrapper');
			},true);
			
			content.addEventListener('click',function(){
				console.log('content');
			},true);
			
			box.addEventListener('click',function(){
				console.log('box');
			},true);*/
			
			/*
			 * 先捕获后冒泡
			 * 黄色只有出发，所以按照先后顺序执行
			 */
			
			/*wrapper.addEventListener('click',function(){
				console.log('wrapper');
			},true);
			
			content.addEventListener('click',function(){
				console.log('content');
			},true);
			
			box.addEventListener('click',function(){
				console.log('box');
			},true);
			
			wrapper.addEventListener('click',function(){
				console.log('wrapperBubble');
			},false);
			
			content.addEventListener('click',function(){
				console.log('contentBubble');
			},false);
			
			box.addEventListener('click',function(){
				console.log('boxBubble');
			},false);*/
			
			
			/*document.onclick = function(){
				console.log("闲的")
			};
			*/
			/*wrapper.addEventListener('click',function(){
				this.style.background = 'green';
			},false);*/
			
			/*wrapper.addEventListener('click',function(e){
				//console.log(e);
				e.stopPropagation();//W3C标准，不支持ie9
				//IE独有，event.cancleBubble = true;
				this.style.background = 'green';
			},false);*/
			
			//右键出菜单
			/*document.oncontextmenu = function(e){
				console.log('a');
				e.preventDefault();//阻止事件
				e.returnValue = false;//IE
			};*/
			
			//取消a标签默认取消
			
			/*var a = document.getElementsByTagName('a')[0];
			a.onclick = function(){
				return false;
			}*/
		</script>
	</body>
</html>
